<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">

    <link rel="stylesheet" href="__HOME__/css/weui.css">
    <link rel="stylesheet" href="__HOME__/css/jquery-weui.css">
    <link rel="stylesheet" href="__HOME__/css/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_689900_q7w1lloaqzg2e29.css">

    <script src="__HOME__/js/vue.js"></script>

    <style>
        .mycenter-top{background: #fff;overflow: hidden;line-height: 60px;padding:20px;}
        .mycenter-top img{border-radius: 50%;float: left;}

    </style>
</head>
<body class="back1"  >

<div class="index-top-fix">
    <a href="{:url('mycenter')}?shop_id={$shop_id}" class="iconfont icon-left- left"></a>
    <p class="title">编辑</p>
</div>
    <div class="weui-cells__title"  style="margin-top: 50px"> 头像</div>
    <div class="weui-cells"  style="width: auto" >
        <div style="overflow:hidden;padding: 10px">
            <!--<p>头像</p>-->
            <div class="weui-uploader__input-box" id="ap">

                <div  >
                    <img :src="pic_url" v-if="pic_url" style="width: 77px;height: 77px;">
                    <img src="{$res.headimgurl}" style="width: 77px;height: 77px;"  id="img">
                    <div id="uploaderInput" class="weui-uploader__input wx_uploader"  style="width: 100%;height: 100%;">
                        <a href="#" v-if="!pic_url">
                            <i style="line-height: 80px ;color: #cecece;font-size: 33px;" class="iconfont icon-jia">
                            </i>

                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="weui-cells__title">手机号</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="tel" value="{$res.tel}" placeholder="请输入手机号">
            </div>
        </div>
    </div>
    <div class="weui-cells__title">微信名称</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="wx_name" value="{$res.wx_name}"  readonly="readonly">
            </div>
        </div>
    </div>
    <div class="weui-cells__title">真实姓名</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="realname" value="{$res.realname}"  placeholder="请输入真实姓名">
            </div>
        </div>
    </div>
    <div class="weui-cells__title">性别</div>
    <div class="weui-cells weui-cells_radio">

        <label class="weui-cell weui-check__label" >
            <div class="weui-cell__bd">
                <p>男</p>
            </div>
            <div class="weui-cell__ft">
                {if  $res.sex == 1 || $res.sex == 0}
                <input type="radio" class="weui-check" name="radio1" value="1" checked="checked">
                {else}
                <input type="radio" class="weui-check" name="radio1" value="1" >
                {/if}
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        <label class="weui-cell weui-check__label" >

            <div class="weui-cell__bd">
                <p>女</p>
            </div>
            <div class="weui-cell__ft">

                {if  $res.sex == 2}
                <input type="radio" name="radio1" class="weui-check"  value="2"  checked="checked">
                {else}
                <input type="radio" name="radio1" class="weui-check" value="2">
                {/if}

                <span class="weui-icon-checked"></span>
            </div>
        </label>

    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" onclick="submit()" >确定</a>
    </div>

</body>
<script src="__HOME__/js/jweixin-1.2.0.js"></script>
<script src="__HOME__/js/jquery.min.js"></script>
<script src="__HOME__/js/jquery-weui.min.js"></script>
<script>
    //vue对象
    var app = new Vue({
        el: '#ap',
        data: {
            //初始化
            pic_src: '',
            pic_url: ''
        }
    });


    wx.config({
        debug: false,
        appId: '{$jsconfig.appId}',
        timestamp: '{$jsconfig.timestamp}',
        nonceStr: '{$jsconfig.noncestr}',
        signature: '{$jsconfig.signature}',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'translateVoice',
            'startRecord',
            'stopRecord',
            'onRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard'
        ]
    });
    wx.isInit = false;

    wx.ready(function () {


        wx.checkJsApi({
            jsApiList: [
                'getNetworkType',
                'previewImage'
            ],
            success: function (res) {
//                alert(JSON.stringify(res));
            }
        });


        // 5 图片接口
        // 5.1 拍照、本地选图
        var images = {
            localId: [],
            serverId: []
        };

        $('.wx_uploader').click(function () {

            var id=$(this).attr('id');

            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    console.log('已选择 ' + res.localIds.length + ' 张图片');
                    var i = 0, length = images.localId.length;
                    images.serverId = [];
                    function upload() {
                        wx.uploadImage({
                            localId: images.localId[i],
                            success: function (res) {

                                i++;
                                console.log('已上传：' + i + '/' + length);
                                //单个上传完成时
//                                record.send_img(res.serverId);
                               var  shop_id='{$shop_id}';
                                $.get('/store/api/tempfile', {mid: res.serverId,shop_id:shop_id}, function (res) {
                                    console.log(res);
                                    if(res.code==1){
                                        app.pic_src = res.data.src;
                                        app.pic_url = res.data.url;
                                        $('#img').hide();

                                    }
                                });

                                images.serverId.push(res.serverId);
                                if (i < length) {
                                    upload();
                                } else {
                                    //全部上传完成时

                                }
                            },
                            fail: function (res) {
                                // alert(JSON.stringify(res));
                            }
                        });
                    }

                    upload();

                }
            });

        });

    });
    wx.error(function (res) {
//        alert(res.errMsg);
    });

    function submit(){

        //拿到信息

        var headimgurl = app.pic_url;
        var tel = $('#tel').val();
        var wx_name = $('#wx_name').val();
        var realname = $('#realname').val();

        var sex = $("input[name='radio1']:checked").val();

        // 电话不可为空
        if(tel === '' || tel === "undefined"){
            // layer.msg("请填写标题",{icon:5,time:1000});
            alert('电话不能为空')
            $("#tel").focus();
            return;
        }
        // 真实姓名不可为空
        if(realname === '' || realname === "undefined"){
            // layer.msg("请填写标题",{icon:5,time:1000});
            alert('真实姓名不能为空')
            $("#realname").focus();
            return;
        }


        $.ajax({
            type: 'post',
            url: '',
            dataType: 'JSON',
            data: {
                headimgurl:headimgurl
                ,tel:tel
                ,wx_name:wx_name
                ,sex:sex
                ,realname:realname
            },
            success: function (res) {
                //提交成功后，跳转到登录页面
                if (res.code == 1) {
                    $.toast(res.msg, function () {
                        location.href = "{:url('mycenter')}?shop_id={$shop_id}";
                    });

                } else {
//
                    $.toast(res.msg ,function () {
                        location.href = "{:url('mycenter')}?shop_id={$shop_id}";
                    })
                }
            }
        })

    }



</script>
</html>

